import React, { FC, useCallback, useEffect, useState, useMemo } from "react";
import './marketing.less'
import { Select, Input, Button, Space, Switch, Pagination, Modal,message } from 'antd';
import Img from './img'
import { connect } from 'react-redux';
import action from '../../store/Actions/index';
import Table from '../../component/table'
import {
  EditTwoTone,
  DeleteTwoTone,
  SnippetsTwoTone,
} from '@ant-design/icons';
import Item from "antd/lib/list/Item";
const { Option } = Select;


interface State {

}
interface Props {
  datalist: Array<any>,
  getscblist: any,
  administratorReducer?: any,
  scbcollegelist?: any,
  addstudent: any,
  diststudent: any,
  amendstudent:any,
  setisms:any,
}



const Marketing = (props: Props,) => {

  const [scb, setscb] = useState('中原')
  const [xsphone, setxsphone] = useState('')
  const [jzphone, setjzphone] = useState('')
  const [name, setname] = useState('')
  const [cid, setcid] = useState('')
  const [qwstage, setqwstage] = useState('')
  const [stage, setstage] = useState('中职')
  const [totlemoney, setscbtotlemoney] = useState('')
  const [nowmoney, setnowmoney] = useState('')
  const [sex, setsex] = useState('男')
  const [msscore, setmsscore] = useState('')
  const [page, setpage] = useState(5)
  const [pageIndex, setpageIndex] = useState(1)
  const [loading, setcloading] = useState(false)
  const [visible, setvisible] = useState(false)
  const [xsobj, setxsobj] = useState({ id: '',scb:'',name:'',xsphone:'',jzphone:'',cid:'',stage:'',totlemoney:'',nowmoney:'',qwstage:'',sex:'', })
  const [alertflag, setalertflag] = useState(0)

  const reg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/

  const columns = [
    {
      title: '学号',
      width: 100,
      dataIndex: 'id',
      key: 'id',
      fixed: 'left',
    },
    {
      title: '姓名',
      width: 100,
      dataIndex: 'name',
      key: 'name',
      fixed: 'left',
    },
    {
      title: '身份证',
      dataIndex: 'cid',
      key: 'cid',
      width: 150,
    },
    {
      title: '电话',
      dataIndex: 'xsphone',
      key: 'xsphone',
      width: 150,
    },
    {
      title: '市场部',
      dataIndex: 'scb',
      key: 'scb',
      width: 150,
    },
    {
      title: '期望专业',
      dataIndex: 'qwstage',
      key: 'qwstage',
      width: 150,
    },
    {
      title: '是否通过面试',
      dataIndex: 'address',
      key: '5',
      width: 150,
      render: (text, record) => (
        <Switch checkedChildren="是" unCheckedChildren="否" checked={record.isms=='true'?true:false} onChange={async (e)=>{
          
          await props.setisms(record.id)
          await props.getscblist({ page, pageIndex })
          
        }}/>
      )
    },

    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 100,
      render: (text, record) => (
        <Space size="middle">
          <EditTwoTone onClick={() => {
            setvisible(true)
            setalertflag(1)
            setxsobj(record)
          }} />
          <SnippetsTwoTone onClick={() => {
            setvisible(true)
            setalertflag(2)
            setxsobj(record)
          }} />
          <DeleteTwoTone onClick={() => {
            setvisible(true)
            setalertflag(3)
            setxsobj(record)
          }} />

        </Space>
      )
    },
  ];

  useEffect(() => {
    props.getscblist({ page: page, pageIndex: pageIndex })
    setTimeout(() => {
      setqwstage(props.administratorReducer.scbcollegelist[0].college)
    }, 0);


  }, [])
  function showTotal(total) {

    // return `Total ${total} items`;
  }
  async function handleOk() {

    setcloading(true)
    
    if (alertflag == 0) {
      setpageIndex(1)
      setTimeout(async () => {
        setvisible(false)
        setcloading(false)
        await props.addstudent({
          scb, xsphone, jzphone, name, cid, qwstage, stage, totlemoney, nowmoney, sex, msscore,image:props.administratorReducer.img,imgtype:props.administratorReducer.imgtype
        })
        await props.getscblist({ page, pageIndex: 1 })
      }, 3000);
    } else if (alertflag == 1) {
      setTimeout(async () => {
        setvisible(false)
        setcloading(false)
        await props.amendstudent(xsobj)
        await props.getscblist({ page, pageIndex:pageIndex })
      
      }, 3000);

    } else if (alertflag == 2) {
      setvisible(false)
      

    } else if (alertflag == 3) {
      setpageIndex(1)
      setTimeout(async () => {
        setvisible(false)
        setcloading(false)
        await props.diststudent(xsobj.id)
        await props.getscblist({ page, pageIndex: 1, })
       

      }, 3000);


    }



  };
  function handleCancel() {
    // this.setState({ visible: false });
    setvisible(false)
  };
  return (



    <div className="Marketing">
     
      {
        alertflag == 0 ? <Modal
          visible={visible}
          title='添加学员'
          onOk={handleOk}
          onCancel={handleCancel}
          footer={[
            <Button key="back" onClick={handleCancel}>
              关闭
            </Button>,
            <Button key="submit" type="primary" loading={loading} onClick={handleOk}>
              确定
            </Button>,
          ]}
        >
          <div>
            <p>市场部:{scb}</p>
            <p>手机号{xsphone}:</p>
            <p>家长电话:{jzphone}</p>
            <p>学生姓名:{name}</p>
            <p>身份证:{cid}</p>
            <p>性别:{sex}</p>
            <p>期望专业:{qwstage}</p>
            <p>学生类型:{stage}</p>

          </div>
        </Modal> : null
      }
      {
        alertflag == 1 ? <Modal
          visible={visible}
          title='修改学员信息'
          onOk={handleOk}
          onCancel={handleCancel}
          footer={[
            <Button key="back" onClick={handleCancel}>
              关闭
            </Button>,
            <Button key="submit" type="primary" loading={loading} onClick={handleOk}>
              确定
            </Button>,
          ]}
        >
          <div>
            <div className="divs2"><span className="span2">市场部:</span><Select value={xsobj.scb} style={{ width: 400 }} onChange={(e) => {
              console.log(e);
              
              setxsobj({ id: xsobj.id,scb:e,name:xsobj.name,xsphone:xsobj.xsphone,jzphone:xsobj.jzphone,cid:xsobj.cid,stage:xsobj.stage,totlemoney:xsobj.totlemoney,nowmoney:xsobj.nowmoney,qwstage:xsobj.qwstage,sex:xsobj.sex, })
            }}>
              <Option value="中原">中原</Option>
              <Option value="保仓">保仓</Option>
              <Option value="黑吉">黑吉</Option>
              <Option value="燕泽">燕泽</Option>
            </Select></div>
            <div className="divs2"><span>手机号:</span><Input type='number' placeholder="请输入" style={{ "marginLeft": "-20px" }} value={xsobj.xsphone} onChange={(e) => [
                setxsobj({ id: xsobj.id,scb:xsobj.scb,name:xsobj.name,xsphone:e.target.value,jzphone:xsobj.jzphone,cid:xsobj.cid,stage:xsobj.stage,totlemoney:xsobj.totlemoney,nowmoney:xsobj.nowmoney,qwstage:xsobj.qwstage,sex:xsobj.sex, })
            ]} /></div>
             <div className="divs2"><span>家长电话:</span><Input type='number' placeholder="请输入" style={{ "marginLeft": "-20px" }} value={xsobj.jzphone} onChange={(e) => [
              setxsobj({ id: xsobj.id,scb:xsobj.scb,name:xsobj.name,xsphone:xsobj.xsphone,jzphone:e.target.value,cid:xsobj.cid,stage:xsobj.stage,totlemoney:xsobj.totlemoney,nowmoney:xsobj.nowmoney,qwstage:xsobj.qwstage,sex:xsobj.sex, })
            ]} /></div>
            <div className="divs2"><span>学生性名:</span><Input placeholder="请输入" style={{ "marginLeft": "-20px" }} value={xsobj.name} onChange={(e) => [
              setxsobj({ id: xsobj.id,scb:xsobj.scb,name:e.target.value,xsphone:xsobj.xsphone,jzphone:xsobj.jzphone,cid:xsobj.cid,stage:xsobj.stage,totlemoney:xsobj.totlemoney,nowmoney:xsobj.nowmoney,qwstage:xsobj.qwstage,sex:xsobj.sex, })
            ]} /></div>
            <div className="divs2"><span>身份证:</span><Input placeholder="请输入" style={{ "marginLeft": "-20px" }} value={xsobj.cid} onChange={(e) => [
             setxsobj({ id: xsobj.id,scb:xsobj.scb,name:xsobj.name,xsphone:xsobj.xsphone,jzphone:xsobj.jzphone,cid:e.target.value,stage:xsobj.stage,totlemoney:xsobj.totlemoney,nowmoney:xsobj.nowmoney,qwstage:xsobj.qwstage,sex:xsobj.sex, })
            ]} /></div>
            <div className="divs2"><span>性别:</span><Select defaultValue="男" style={{ width: 400 }} value={xsobj.sex} onChange={(e) => {
              setxsobj({ id: xsobj.id,scb:xsobj.scb,name:xsobj.name,xsphone:xsobj.xsphone,jzphone:xsobj.jzphone,cid:xsobj.cid,stage:xsobj.stage,totlemoney:xsobj.totlemoney,nowmoney:xsobj.nowmoney,qwstage:xsobj.qwstage,sex:e, })
            }} >
              <Option value="男">男</Option>
              <Option value="女">女</Option>
            </Select></div>
            <div className="divs2"><span>期望专业:</span><Select value={xsobj.qwstage} style={{ width: 400 }} onChange={(e) => {
             setxsobj({ id: xsobj.id,scb:xsobj.scb,name:xsobj.name,xsphone:xsobj.xsphone,jzphone:xsobj.jzphone,cid:xsobj.cid,stage:xsobj.stage,totlemoney:xsobj.totlemoney,nowmoney:xsobj.nowmoney,qwstage:e,sex:xsobj.sex, })
            }}>
              {
                props.administratorReducer.scbcollegelist.filter((item) => {
                  return item.type == '0'
                }).map((item) => {
                  return <Option value={item.college}>{item.college}</Option>
                })
              }
            </Select></div>
            <div className="divs2"><span>学生类型:</span><Select value={xsobj.stage} style={{ width: 400 }} onChange={(e) => {
              setxsobj({ id: xsobj.id,scb:xsobj.scb,name:xsobj.name,xsphone:xsobj.xsphone,jzphone:xsobj.jzphone,cid:xsobj.cid,stage:e,totlemoney:xsobj.totlemoney,nowmoney:xsobj.nowmoney,qwstage:xsobj.qwstage,sex:xsobj.sex, })
            }}>
              <Option value="中职">中职</Option>
              <Option value="高职">高职</Option>
              <Option value="专基">专基</Option>
              <Option value="专业">专业</Option>
              <Option value="专高">专高</Option>
              <Option value="实训">实训</Option>

            </Select></div>
            <div className="divs2"><span>应缴费用:</span><Input type='number' placeholder="请输入" style={{ "marginLeft": "-20px" }} value={xsobj.totlemoney} onChange={(e) => [
              setxsobj({ id: xsobj.id,scb:xsobj.scb,name:xsobj.name,xsphone:xsobj.xsphone,jzphone:xsobj.jzphone,cid:xsobj.cid,stage:xsobj.stage,totlemoney:e.target.value,nowmoney:xsobj.nowmoney,qwstage:xsobj.qwstage,sex:xsobj.sex, })
            ]} /></div>
            <div className="divs2"><span>实际缴费:</span><Input type='number' placeholder="请输入" style={{ "marginLeft": "-20px" }} value={xsobj.nowmoney} onChange={(e) => [
              setxsobj({ id: xsobj.id,scb:xsobj.scb,name:xsobj.name,xsphone:xsobj.xsphone,jzphone:xsobj.jzphone,cid:xsobj.cid,stage:xsobj.stage,totlemoney:xsobj.totlemoney,nowmoney:e.target.value,qwstage:xsobj.qwstage,sex:xsobj.sex, })
            ]} /></div>
          </div>
        </Modal> : null
      }
      {
        alertflag == 2 ? <Modal
          visible={visible}
          title='学院基本信息'
          onOk={handleOk}
          onCancel={handleCancel}
          footer={[

            <Button key="submit" type="primary" loading={loading} onClick={handleOk}>
              确定
            </Button>,
          ]}
        >
          <div>
            <p>市场部:{xsobj.scb}</p>
            <p>手机号{xsobj.xsphone}:</p>
            <p>家长电话:{xsobj.jzphone}</p>
            <p>学生姓名:{xsobj.name}</p>
            <p>身份证:{xsobj.cid}</p>
            <p>性别:{xsobj.sex}</p>
            <p>期望专业:{xsobj.qwstage}</p>
            <p>学生类型:{xsobj.stage}</p>
            <p>应缴费用:{xsobj.totlemoney}</p>
            <p>实际缴费:{xsobj.nowmoney}</p>
          </div>
        </Modal> : null
      }
      {
        alertflag == 3 ? <Modal
          visible={visible}
          title='删除学员'
          onOk={handleOk}
          onCancel={handleCancel}
          footer={[
            <Button key="back" onClick={handleCancel}>
              关闭
            </Button>,
            <Button key="submit" type="primary" loading={loading} onClick={handleOk}>
              确定
            </Button>,
          ]}
        >
          <div>
            确定要删除吗?
          </div>
        </Modal> : null
      }
      <div className="Marketings">
        <div className="inps">
          <div className="divs"><b>*</b><span>市场部</span> <Select value={scb} style={{ width: 100 }} onChange={(e) => {
            setscb(e)
          }}>
            <Option value="中原">中原</Option>
            <Option value="保仓">保仓</Option>
            <Option value="黑吉">黑吉</Option>
            <Option value="燕泽">燕泽</Option>
          </Select></div>
          <div className="divs"><b>*</b><span className="span">手机号</span><Input type='number' placeholder="请输入" style={{ "marginLeft": "-20px" }} value={xsphone} onChange={(e) => [
            setxsphone(e.target.value)
          ]} />
            {
              xsphone == '' ? <i>不能为空</i> : (!reg.test(xsphone) && xsphone != '' ? <i>手机号格式不正确</i> : null)
            }
          </div>
          <div className="divs"><b>*</b><span className="span">家长电话</span> <Input placeholder="请输入" value={jzphone} onChange={(e) => {
            setjzphone(e.target.value)
          }} />
            {!reg.test(jzphone) && jzphone != '' ? <i>手机号格式不正确</i> : null}</div>
          <div className="divs"><b>*</b><span className="span">学生姓名</span> <Input placeholder="请输入" value={name} style={{ width: 100, marginLeft: "-35px" }} onChange={(e) => {
            setname(e.target.value)
          }} />{
              // name == '' ? <i>不能为空</i> : null
            }</div>

          <div className="divs"><b>*</b><span className="span">身份证</span><Input placeholder="请输入" className="inp" value={cid} onChange={(e) => {
            setcid(e.target.value)
          }} />{
              cid == '' ? <i>不能为空</i> : null
            }</div>
          <div className="divs"><b>*</b><span>性别</span> <Select defaultValue="男" style={{ width: 80 }} value={sex} onChange={(e) => {
            setsex(e)
          }} >
            <Option value="男">男</Option>
            <Option value="女">女</Option>
          </Select></div>
          <div className="divs" ><b>*</b><span>期望专业</span> <Select value={qwstage} style={{ width: 200 }} onChange={(e) => {
            setqwstage(e)
          }}>
            {
              props.administratorReducer.scbcollegelist.filter((item) => {
                return item.type == '0'
              }).map((item) => {
                return <Option value={item.college}>{item.college}</Option>
              })
            }
          </Select></div>
          <div className="divs"><b>*</b><span>学生类型</span> <Select value={stage} style={{ width: 120 }} onChange={(e) => {
            setstage(e)
          }}>
            <Option value="中职">中职</Option>
            <Option value="高职">高职</Option>
            <Option value="专基">专基</Option>
            <Option value="专业">专业</Option>
            <Option value="专高">专高</Option>
            <Option value="实训">实训</Option>

          </Select></div>
          <div className="divs"><b>*</b><span className="span">应缴费用</span><Input type='number' placeholder="请输入" style={{ width: 100, marginLeft: "-35px" }} value={totlemoney} onChange={(e) => {
            setscbtotlemoney(e.target.value)
          }} />{
              // totlemoney == '' ? <i>不能为空</i> : null
            }</div>
          <div className="divs"><b>*</b><span className="span">实际缴费</span><Input type='number' placeholder="请输入" style={{ width: 100, marginLeft: "-35px" }} value={nowmoney} onChange={(e) => {
            setnowmoney(e.target.value)
          }} />{
              // nowmoney == '' ? <i>不能为空</i> : null
            }</div>

          <div className="divs"><b>*</b><span className="span">面试成绩</span><Input placeholder="请输入" style={{ width: 100, marginLeft: "-35px" }} type='number' value={msscore} onChange={(e) => {
            setmsscore(e.target.value)
          }} />{
              // msscore == '' ? <i>不能为空</i> : null!
            }</div>
            <div className="divs">
 <Img></Img>
            </div>
            
          <div className="divs"><Button type="primary" disabled={xsphone == '' || name == '' || cid == '' || totlemoney == '' || nowmoney == '' || msscore == ''} onClick={async () => {
            setalertflag(0)
            setvisible(true)



          }}>添加学员</Button></div>
        </div>
        <div className="table">
          <Table studentData={props.administratorReducer.scbList2} columns={columns}></Table>
        </div>
        <div className="yema">
          <Pagination size="small" pageSize={page} current={pageIndex} total={props.administratorReducer.scbList.length} defaultPageSize={page} pageSizeOptions={['5', '10', '15', '20']} showSizeChanger showQuickJumper onChange={async (page, pageSize) => {
            setpageIndex(page)
            setpage(pageSize)
            await props.getscblist({ page: pageSize, pageIndex: page })
          }} />
        </div>

      </div>
    </div>
  )
}
// export default Marketing
export default connect(state => state, action.administratorActions)(Marketing);


